<template>
	<view style="height:100vh">
		<layout>
			<view class="mit-container">
				<!-- 欢迎区域 -->
				<view class="welcome-section">
					<view class="welcome-text">
						<text class="welcome-title">碳管理平台</text>
						<text class="welcome-subtitle">助力企业实现低碳生产与可持续发展</text>
					</view>
					<view class="carbon-tag">
						<uni-icons type="leaf-filled" size="18" color="#FFFFFF"></uni-icons>
						<text>2030碳达峰·2060碳中和</text>
					</view>
				</view>
				
				<!-- 功能卡片区域 -->
				<view class="features-grid">
					<view 
						v-for="(item, index) in list" 
						:key="index" 
						class="feature-card" 
						@click="jumpTo(item.url)"
						:style="{'--i': index}">
						<view class="card-icon">
							<uni-icons :type="getIconType(item.name)" size="28" color="#27ae60"></uni-icons>
						</view>
						<view class="card-content">
							<text class="card-name">{{ item.name }}</text>
							<view class="card-progress">
								<view class="progress-bar">
									<view class="progress-fill" :style="{width: getRandomProgress()}"></view>
								</view>
								<text class="progress-text">{{ getCompletionStatus(item.name) }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 碳排统计区域 -->
				<view class="carbon-stats-section">
					<view class="section-header">
						<text class="section-title">碳排放统计</text>
						<text class="section-subtitle">较去年同期</text>
					</view>
					
					<view class="stats-grid">
						<view class="stat-card">
							<view class="stat-icon electricity">
								<uni-icons type="fire-filled" size="24" color="#FFFFFF"></uni-icons>
							</view>
							<view class="stat-content">
								<text class="stat-title">电力碳排</text>
								<text class="stat-value">4,280 kg</text>
								<text class="stat-change reduction">↓12.5%</text>
							</view>
						</view>
						
						<view class="stat-card">
							<view class="stat-icon water">
								<uni-icons type="refreshempty" size="24" color="#FFFFFF"></uni-icons>
							</view>
							<view class="stat-content">
								<text class="stat-title">水资源碳排</text>
								<text class="stat-value">1,560 kg</text>
								<text class="stat-change reduction">↓8.3%</text>
							</view>
						</view>
						
						<view class="stat-card">
							<view class="stat-icon gas">
								<uni-icons type="cloud-filled" size="24" color="#FFFFFF"></uni-icons>
							</view>
							<view class="stat-content">
								<text class="stat-title">燃气碳排</text>
								<text class="stat-value">3,120 kg</text>
								<text class="stat-change reduction">↓15.7%</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 碳足迹展示 -->
				<view class="carbon-footprint">
					<view class="footprint-content">
						<text class="footprint-title">碳中和进度</text>
						<text class="footprint-value">今年已减少 <text class="highlight">8,960</text> kg 碳排放</text>
						<text class="footprint-slogan">低碳生活，共建绿色未来</text>
					</view>
					<view class="footprint-graphic">
						<uni-icons type="circle-filled" size="80" color="rgba(39, 174, 96, 0.2)"></uni-icons>
						<text class="percentage">32%</text>
					</view>
				</view>
			</view>
		</layout>
	</view>
</template>

<script setup>
	import { reactive, onMounted } from 'vue';
	import { useRouter } from 'vue-router';
	
	const router = useRouter();
	
	const list = reactive([
		{ name: '能耗监控', url: '/pages/mit/mit1' },
		{ name: '节能预警', url: '/pages/mit/mit2' },
		{ name: '碳排配置', url: '/pages/mit/mit3' },
		{ name: 'AI助手', url: '/pages/mit/chat' }
	]);
	
	const jumpTo = (url) => {
		uni.navigateTo({
url: url
});
	};
	
	const getIconType = (name) => {
		const iconMap = {
			'能耗监控': 'settings-filled',
			'节能预警': 'notification-filled',
			'碳排配置': 'gear-filled',
			'AI助手': 'staff-filled'
		};
		return iconMap[name] || 'star-filled';
	};
	
	const getRandomProgress = () => {
		return Math.floor(30 + Math.random() * 70) + '%';
	};
	
	const getCompletionStatus = (name) => {
		const statusMap = {
			'能耗监控': '实时监测中',
			'节能预警': '11项待处理',
			'碳排配置': '配置已完成',
			'AI助手': '随时可用'
		};
		return statusMap[name] || '可用';
	};
</script>

<style scoped>
	.mit-container {
		min-height: 100vh;
		padding: 30rpx;
		background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
	}
	
	/* 欢迎区域样式 */
	.welcome-section {
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		animation: fadeIn 0.5s ease forwards;
	}
	
	.welcome-text {
		display: flex;
		flex-direction: column;
	}
	
	.welcome-title {
		font-size: 44rpx;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 12rpx;
	}
	
	.welcome-subtitle {
		font-size: 28rpx;
		color: #7f8c8d;
	}
	
	.carbon-tag {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background: linear-gradient(90deg, #27ae60, #2ecc71);
		color: white;
		padding: 12rpx 24rpx;
		border-radius: 100rpx;
		font-size: 24rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(39, 174, 96, 0.2);
	}
	
	/* 功能卡片区域样式 */
	.features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320rpx, 1fr));
		gap: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.feature-card {
		background: white;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(39, 174, 96, 0.1);
		padding: 30rpx;
		display: flex;
		align-items: center;
		gap: 24rpx;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		border: 1px solid rgba(39, 174, 96, 0.1);
		animation: fadeIn 0.5s ease forwards;
		animation-delay: calc(0.1s * var(--i, 0));
	}
	
	.feature-card:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 32rpx rgba(39, 174, 96, 0.15);
	}
	
	.card-icon {
		background: rgba(39, 174, 96, 0.1);
		border-radius: 16rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}
	
	.card-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.card-progress {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	
	.progress-bar {
		height: 10rpx;
		background: rgba(127, 140, 141, 0.1);
		border-radius: 100rpx;
		overflow: hidden;
	}
	
	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #27ae60, #2ecc71);
		border-radius: 100rpx;
	}
	
	.progress-text {
		font-size: 22rpx;
		color: #7f8c8d;
	}
	
	/* 碳排统计区域样式 */
	.carbon-stats-section {
		margin-bottom: 40rpx;
		animation: fadeIn 0.5s ease forwards;
		animation-delay: 0.3s;
	}
	
	.section-header {
		display: flex;
		align-items: baseline;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-right: 12rpx;
	}
	
	.section-subtitle {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.stats-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220rpx, 1fr));
		gap: 20rpx;
	}
	
	.stat-card {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}
	
	.stat-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.stat-icon.electricity {
		background: linear-gradient(45deg, #e74c3c, #ff7675);
	}
	
	.stat-icon.water {
		background: linear-gradient(45deg, #3498db, #74b9ff);
	}
	
	.stat-icon.gas {
		background: linear-gradient(45deg, #9b59b6, #a29bfe);
	}
	
	.stat-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}
	
	.stat-title {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.stat-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.stat-change {
		font-size: 22rpx;
		font-weight: 500;
	}
	
	.stat-change.reduction {
		color: #27ae60;
	}
	
	.stat-change.increase {
		color: #e74c3c;
	}
	
	/* 碳足迹展示样式 */
	.carbon-footprint {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 8rpx 24rpx rgba(39, 174, 96, 0.1);
		border: 1px solid rgba(39, 174, 96, 0.1);
		animation: fadeIn 0.5s ease forwards;
		animation-delay: 0.4s;
	}
	
	.footprint-content {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}
	
	.footprint-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.footprint-value {
		font-size: 28rpx;
		color: #7f8c8d;
	}
	
	.footprint-value .highlight {
		color: #27ae60;
		font-weight: 600;
	}
	
	.footprint-slogan {
		font-size: 24rpx;
		color: #27ae60;
		font-weight: 500;
		margin-top: 8rpx;
	}
	
	.footprint-graphic {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.percentage {
		position: absolute;
		font-size: 28rpx;
		font-weight: 700;
		color: #27ae60;
	}
	
	@keyframes fadeIn {
		from { 
			opacity: 0;
			transform: translateY(20rpx);
		}
		to { 
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@media (max-width: 768px) {
		.welcome-section {
			flex-direction: column;
			align-items: flex-start;
			gap: 20rpx;
		}
		
		.features-grid,
		.stats-grid {
			grid-template-columns: 1fr;
		}
		
		.carbon-footprint {
			flex-direction: column;
			gap: 30rpx;
		}
		
		.footprint-content {
			text-align: center;
		}
	}
</style>